﻿<template>
    <view>
        <u-toast ref="uToast" /><u-no-network></u-no-network>
        <u-navbar title="订单列表" safeAreaInsetTop fixed placeholder>
            <view class="coreshop-navbar-left-slot" slot="left">
                <u-icon name="arrow-left" size="19" @click="goNavigateBack"></u-icon>
                <u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
                <u-icon name="home" size="22" @click="goHome"></u-icon>
            </view>
            <view slot="right">
            </view>
        </u-navbar>
        <view class="orderWrap">
            <view class="coreshop-padding-10">
                <u-subsection :list="tabs" :current="current" @change="onClickItem" mode="button"></u-subsection>
            </view>
            <block v-if="listData.length > 0">
                <view class="orderList" v-for="(order, orderIndex) in listData" :key="orderIndex">
                    <view class="coreshop-flex coreshop-justify-between coreshop-align-center" @click="goOrderDetail(order.orderId)">
                        <view class="coreshop-flex coreshop-align-center">
                            <u-icon name="home" :size="20" color="rgb(94,94,94)"></u-icon>
                            <view class="coreshop-margin-left-5 coreshop-margin-right-5 coreshop-font-15 coreshop-font-weight-bold">订单号 : {{order.orderId}}</view>
                            <u-icon name="arrow-right" color="rgb(203,203,203)" :size="15"></u-icon>
                        </view>
                        <view>{{ order.orderStatusName }}</view>
                    </view>
                    <view class="item" v-for="(goods, indexGoods) in order.items" :key="indexGoods">
                        <view class="left">
                            <u--image :showLoading="true" :src="goods.imageUrl" width="80px" height="80px" mode="aspectFill"></u--image>
                        </view>
                        <view class="content">
                            <view class="title u-line-2">{{goods.name}}</view>
                            <view class="type">{{goods.addon}}</view>
                            <view class="delivery-time">下单时间：{{ $u.timeFormat(goods.createTime, 'yyyy-mm-dd hh:MM:ss') }}</view>
                        </view>
                        <view class="right">
                            <view class="price">
                                ￥{{ goods.price }}
                            </view>
                            <view class="number">x{{ goods.nums }}</view>
                        </view>
                    </view>
                    <view class="total">
                        共{{ order.items.length }}件商品 合计:
                        <text class="total-price">
                            ￥{{ order.orderAmount }}
                        </text>
                    </view>
                    <view class="bottom">
                        <view class="more">
                            <u-tag :text="order.typeText" mode="light" />
                        </view>
                        <view class="coreshop-flex">
                            <view class='logistics coreshop-btn' @click="goOrderDetail(order.orderId)">查看详情</view>
                            <view class='coreshop-btn exchange' v-if="order.status === 1 && order.payStatus === 1" @click="goToPay(order.orderId)">立即支付</view>
                            <view class='coreshop-btn exchange' v-if="order.status === 1 && order.payStatus >= 2 && order.shipStatus >= 3 && order.confirmStatus === 1" @click="tackDelivery(current,orderIndex)">确认收货</view>
                            <view class='evaluate coreshop-btn' v-if="order.status === 1 && order.payStatus >= 2 && order.shipStatus >= 3 && order.confirmStatus >= 2 && order.isComment === false" @click="toEvaluate(order.orderId)">立即评价</view>
                        </view>
                    </view>
                </view>
                <u-loadmore :status="loadStatus"></u-loadmore>
            </block>


            <!-- 无数据时默认显示 -->
            <view class="coreshop-emptybox" v-else>
                <u-empty :icon="$globalConstVars.apiFilesUrl+'/static/images/empty/order.png'" icon-size="150" text="您还没有相关类别的订单" mode="list"></u-empty>
                <navigator class="coreshop-btn" url="/pages/category/index/index" open-type="switchTab">随便逛逛</navigator>
            </view>


        </view>
    </view>


</template>
<script>
    
    export default {
        
        data() {
            return {
                tabs: ['全部', '待付款', '待发货', '待收货', '待评价'],
                items: ['未使用', '已使用', '已失效'],
                current: 0,
                page: 1,
                limit: 10,
                listData: [],
                loadStatus: 'loadmore',
                iconType: 'flower',
                loadText: {
                    loadmore: '轻轻上拉',
                    loading: '努力加载中',
                    nomore: '实在没有了'
                },
                status: [0, 1, 2, 3, 4],// 订单状态 0全部 1待付款 2待发货 3待收货 4待评价
            }
        },
        onLoad: function (option) {
            var currentIndex = option.swiperCurrentIndexId;
            if (currentIndex) {
                this.current = currentIndex;
            }
            this.getOrders();
        },
        onReachBottom() {
            if (this.loadStatus === 'loadmore') {
                this.getOrders();
            }
        },
        onShow() {
            // #ifdef MP-ALIPAY || MP-TOUTIAO
            let orderUserShip = this.$db.get('orderUserShip', true);
            if (orderUserShip) {
                this.isReload = orderUserShip;
                this.$db.del('orderUserShip', true);
            }
            let orderUserEvaluate = this.$db.get('orderUserEvaluate', true);
            if (orderUserEvaluate) {
                this.isReload = orderUserEvaluate;
                this.$db.del('orderUserEvaluate', true);
            }
            // #endif
        },
        methods: {
            // tab点击切换
            onClickItem(index) {
                if (this.current !== index) {
                    this.current = index;
                    this.page = 1;
                    this.listData = [];
                    this.getOrders();
                }
            },
            //获取列表
            getOrders() {
                this.loadStatus = 'loading'
                let data = {
                    page: this.page,
                    limit: this.limit,
                    status: this.current
                }
                this.$u.api.orderList(data).then(res => {
                    if (res.status) {
                        res.data.list = this.formatOrderStatus(res.data.list);
                        let newList = this.listData.concat(res.data.list);
                        this.listData = newList;

                        if (res.data.count > this.listData.length) {
                            this.page++
                            this.loadStatus = 'loadmore'
                        } else {
                            this.loadStatus = 'nomore'
                        }
                    } else {
                        this.$u.toast(res.msg);
                    }
                });
            },
            removeorder: function (oid) {
                //console.log(oid);
                uni.showModal({
                    title: '确认提醒',
                    content: '您确定要移除订单 [ ' + oid + ' ] 吗？',
                    success: function (e) {
                        if (e.confirm) {
                            //自行完善删除代码
                        }
                    }
                });
            },
            // 确认收货
            tackDelivery(index, orderIndex) {
                let _this = this;
                var orderId = _this.listData[orderIndex].orderId;
                this.$common.modelShow('提示', '确认收货操作吗?', () => {
                    // #ifdef MP-WEIXIN
                    let payInfoData = {
                        id: orderId
                    }
                    _this.$u.api.getOrderPayInfo(payInfoData).then(resPayInfo => {
                        console.log(resPayInfo);
                        if (resPayInfo.status && resPayInfo.data.paymentCode == 'wechatpay' && resPayInfo.data.status == 2) {
                            let payData = {
                                id: resPayInfo.data.tradeNo
                            }
                            _this.$u.api.orderShippingList(payData).then(res => {
                                if (res.status && res.data == true) {
                                    //拉起确认收货组件
                                    if (wx.openBusinessView) {
                                        wx.openBusinessView({
                                            businessType: 'weappOrderConfirm',
                                            extraData: {
                                                transaction_id: resPayInfo.data.tradeNo
                                            },
                                            success(e) {
                                                _this.doTackDeliery(orderIndex, orderId);
                                            },
                                            fail() { },
                                            complete() { }
                                        });
                                    } else {
                                        _this.$u.toast("您的微信版本过低，请升级微信");
                                    }
                                } else {
                                    _this.doTackDeliery(orderIndex, orderId);
                                }
                            })
                        } else if (resPayInfo.status && resPayInfo.data.paymentCode != 'wechatpay' && resPayInfo.data.status == 2) {
                            _this.doTackDeliery(orderIndex, orderId);
                        }
                        else {
                            _this.$u.toast(resPayInfo.msg)
                        }
                    })
                    // #endif
                    // #ifndef MP-WEIXIN
                    _this.doTackDeliery(orderIndex, orderId);
                    // #endif
                })
            },
            //执行确认收货.
            doTackDeliery(orderIndex, orderId) {
                let _this = this;
                let data = {
                    id: orderId
                }
                _this.$u.api.confirmOrder(data).then(res => {
                    if (res.status) {
                        _this.$refs.uToast.show({
                            message: '确认收货成功', type: 'success', complete: function () {
                                if (this.tab !== 0) {
                                    _this.listData.splice(orderIndex, 1)
                                } else {
                                    _this.getOrders();
                                }
                            }
                        })
                    } else {
                        _this.$u.toast(res.msg)
                    }
                })
            },
            // 订单状态统一在这处理
            formatOrderStatus(orderList) {
                orderList.forEach(item => {
                    switch (item.status) {
                        case 1:
                            if (item.payStatus === 1) {
                                this.$set(item, 'orderStatusName', '待付款')
                            } else if (item.payStatus >= 2 && item.shipStatus === 1) {
                                this.$set(item, 'orderStatusName', '待发货')
                            } else if (item.payStatus >= 2 && item.shipStatus === 2) {
                                this.$set(item, 'orderStatusName', '部分发货')
                            } else if (item.payStatus >= 2 && item.shipStatus >= 3 && item.confirmStatus === 1) {
                                this.$set(item, 'orderStatusName', '已发货')
                            } else if (item.payStatus >= 2 && item.shipStatus >= 3 && item.confirmStatus >= 2 && item.isComment === false) {
                                this.$set(item, 'orderStatusName', '待评价')
                            } else if (item.payStatus >= 2 && item.shipStatus >= 3 && item.confirmStatus >= 2 && item.isComment === true) {
                                this.$set(item, 'orderStatusName', '已评价')
                            }
                            break
                        case 2:
                            this.$set(item, 'orderStatusName', '已完成')
                            break
                        case 3:
                            this.$set(item, 'orderStatusName', '已取消')
                            break
                    }
                });
                for (let i in orderList) {
                    for (let j in orderList[i].items) {
                        orderList[i].items[j].promotionList = JSON.parse(orderList[i].items[j].promotionList);
                    }
                }
                return orderList
            }
        },
    }
</script>


<style lang="scss">
</style>
